<!-- 单列数据具有修改保存功能 + el-tooltip -->
<template>
  <el-table
    class="jk_common_table004"
    style="width: 100%; height: 100%"
    height="style"
    ref="dataTable"
    :data="tableData"
    :class="pagesShow ? 'THeightPage' : 'THeight'"
    :size="size"
    border
    :header-cell-style="headerStyle"
    :cell-style="cellStyle"
    :row-key="rowKey"
    default-expand-all
    @row-click="rowClick"
    @selection-change="handleSelectionChange"
    v-loading="tableLoading"
  >
    <template #empty>
      <div class="table-empty">
        <img src="/images/table-empty.png" alt="" />
        <p>暂无数据</p>
      </div>
    </template>
    <el-table-column v-if="selection" type="selection" width="35" />

    <el-table-column v-if="selectOne" label="选择" width="55">
      <template slot-scope="scope">
        <el-radio :label="scope.row.id" v-model="selectId">
          {{ "" }}
        </el-radio>
      </template>
    </el-table-column>

    <el-table-column
      v-if="showIndex"
      type="index"
      width="60"
      label="序号"
      :fixed="isFixed ? 'left' : false"
    />
    <el-table-column
      v-for="(item, index) in colsData"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width ? item.width : ''"
      :sortable="item.sortable"
    >
      <template #header>
        <span v-html="item.label"></span>
      </template>

      <template v-slot="scope">
        <template
          v-if="
            JSON.stringify(currentEditRow) != '{}' &&
            scope.row.id === currentEditRow.id
          "
        >
          <el-select
            v-if="item.editFlag && item.editType === 'select'"
            v-model="currentEditRow[item.prop]"
            @change="getPointType"
            size="mini"
          >
            <el-option
              v-for="(option, index) in item.options"
              :key="index"
              :label="option.pointCode"
              :value="option.pointCode"
            >
            </el-option>
          </el-select>
          <el-input
            v-else-if="item.editFlag && item.editType === 'input'"
            v-model="currentEditRow[item.prop]"
            size="mini"
          ></el-input>
          <tableTooltip v-else :data="scope.row[item.prop]"> </tableTooltip>
        </template>

        <tableTooltip v-else :data="scope.row[item.prop]"> </tableTooltip>
      </template>
    </el-table-column>

    <!-- fixed="right" 透明背景有冲突-->
    <el-table-column
      label="操作"
      v-if="actions.length > 0"
      width="120"
      :fixed="isFixed ? 'right' : false"
    >
      <template v-slot="scope">
        <template v-for="(action, index) in actions">
          <el-button
            :key="index"
            size="mini"
            type="text"
            :icon="action.icon"
            @click.stop="actionClick(action.action, scope.row)"
            v-if="
              action.multiple
                ? scope.row[action.multiple] === action.multipleCode
                  ? true
                  : false
                : true
            "
            >{{
              scope.row.id === currentEditRow.id && action.name === "编辑"
                ? "取消"
                : action.name
            }}</el-button
          ></template
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
// import { numberToCurrencyNo } from "@/utils/index";
import tableTooltip from "@/components/TableTooltip";
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableLoading: false,
    size: {
      type: String,
      defalut: "defalut",
    },
    headerStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    cellStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    colsData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    actions: {
      type: Array,
      default: () => {
        return [];
      },
    },
    selection: {
      type: Boolean,
      defalut: false,
    },
    showIndex: {
      type: Boolean,
      default: true,
    },
    pagesShow: {
      type: Boolean,
      default: false,
    },
    pager: {
      type: Object,
      default: () => {
        return {
          total: 0,
          current: 1,
          pageSize: 25,
        };
      },
    },
    rowKey: String,
    currentEditRow: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
    selectOne: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    tableTooltip,
  },
  data() {
    return {
      exp: () => /^[0-9]+.?[0-9]*$/,
      currentRow: null,
    };
  },
  methods: {
    rowClick(row) {
      this.$emit("rowClick", row);
    },
    handleSelectionChange(rows) {
      this.$emit("handleSelectionChange", rows);
    },
    handleCurrentChange(val) {
      this.$emit("paginationChangeCur", val);
    },
    isNumber(val) {
      if (!val) return false;
      return this.exp.test(val);
    },
    actionClick(actionType, row) {
      if (actionType != "edit") {
        // 其他按钮
        this.$emit(actionType, JSON.parse(JSON.stringify(row)));
        return;
      }
      if (
        // 取消按钮
        JSON.stringify(this.currentEditRow) != "{}" &&
        this.actions[0].action === "edit"
      ) {
        //取消编辑
        this.$emit("edit", {});
      } else {
        // 编辑按钮
        this.$emit(actionType, JSON.parse(JSON.stringify(row)));
      }
    },
    getPointType(val) {
      console.log(val);
      if (val.endsWith("AV")) {
        this.currentEditRow.pointType = "模拟量";
      } else if (val.endsWith("DV")) {
        this.currentEditRow.pointType = "开关量";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.common-table {
  height: 100%;
}
::v-deep .el-input--mini .el-input__inner {
  // height: 20px;
  // line-height: 20px;
}
</style>
